<template>
  <div class="index-gw-root">

    <!-- 左侧列表 -->
    <div class="routes-tables">
      <div class="qa">
        <qaGw />
      </div>

      <el-tabs class="tables-tabs info-root" type="border-card">
        <el-tab-pane label="路由列表">
          <div class="table-operator">
            <el-input class="search-input" v-model="dataSearch" placeholder="搜索路由ID" style="margin-right: 10px" />
            <el-button @click="getRoutes" type="primary">刷新列表</el-button>
            <el-button @click="routeRefresh" type="primary">刷新缓存</el-button>
          </div>
          <div class="table">
            <el-table border height="100%" tooltip-effect="dark" v-loading="tableLoading" :highlight-current-row="true"
              :data="searchTableDatas" @row-click="rowClick">
              <el-table-column prop="id" min-width="400" :show-overflow-tooltip=true label="路由ID" />
              <el-table-column prop="uri" width="190" label="转发服务" />
            </el-table>
          </div>
        </el-tab-pane>
        <!-- 全局过滤器 -->
        <el-tab-pane label="全局过滤器">
          <div class="table-operator">
            <el-input class="search-input" v-model="globalFilterDataSearch" placeholder="搜索过滤器名称"
              style="margin-right: 10px" />
            <el-button @click="getGlobalFiltersApi" type="primary">刷新列表</el-button>
          </div>
          <div class="table">
            <el-table border height="100%" tooltip-effect="dark" v-loading="tableLoading"
              :data="searchGlobalFilterTableDatas">
              <el-table-column prop="filterName" min-width="520" :show-overflow-tooltip=true label="过滤器名称" />
              <el-table-column prop="order" width="100" label="排序" />
            </el-table>
          </div>
        </el-tab-pane>
        <!-- 其他过滤器 -->
        <el-tab-pane label="其他过滤器">
          <div class="table-operator">
            <el-input class="search-input" v-model="routeFilterDataSearch" placeholder="搜索过滤器名称"
              style="margin-right: 10px" />
            <el-button @click="getRouteFiltersApi" type="primary">刷新列表</el-button>
          </div>
          <div class="table">
            <el-table border height="100%" tooltip-effect="dark" v-loading="tableLoading"
              :data="searchRouteFilterTableDatas">
              <el-table-column prop="filterName" min-width="530" :show-overflow-tooltip=true label="过滤器名称">
                <template #default="scope">
                  <div v-html="scope.row.filterName">
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="order" width="70" label="排序" />
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 右侧详情 -->
    <div class="route-details info-root">
      <div class="route-details-operator">
        <div><el-tag>在下方编辑后保存即可</el-tag></div>
        <el-button type="primary" @click="saveRoute">保存</el-button>
        <el-button type="warning" @click="disableRoute">停用</el-button>
        <el-button type="info" @click="formatRoute">格式化</el-button>
      </div>
      <div class="route-editor-container">
        <el-input type="textarea" v-model="routeInfoJson" resize="none" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { ElNotification } from "element-plus";
import { routesApi, routeInfoApi, routeRefreshApi, globalFiltersApi, routeFiltersApi } from "@/api/gateway";
import { isNull, isNotNull } from "@/assets/utils/obj";
import { formatJson } from "@/assets/utils/util";
import qaGw from "./QAGw.vue";

const dataSearch = ref('');
const tableLoading = ref(false);
const tableDatas = ref([{ id: "", url: "" }])

const searchTableDatas = computed(() => {
  return tableDatas.value.filter((route: any) => {
    if (isNull(dataSearch.value)) {
      return true;
    }
    return route.id.toLowerCase().includes(dataSearch.value.toLowerCase())
  })
})

const getRoutes = () => {
  tableLoading.value = true;
  routesApi().then(resp => {
    if (isNotNull(resp.data)) {
      tableDatas.value = resp.data;
      rowClick(tableDatas.value[0])
    }
  }).finally(() => {
    tableLoading.value = false;
  })
}

const routeRefresh = () => {
  routeRefreshApi().then(_ => {
    ElNotification({ message: '刷新路由缓存成功', type: "success", position: 'bottom-right', title: '刷新成功' });
  });
}

const rowClick = (row: any) => {
  routeInfoApi({ routeId: row.id }).then(resp => {
    routeInfoJson.value = formatJson(resp.data);
  })
}


// 全局过滤器
const globalFilterDataSearch = ref('');
const globalFilterTableDatas = ref([{ filterName: "", order: 0 }])
const searchGlobalFilterTableDatas = computed(() => {
  return globalFilterTableDatas.value.filter((filter: any) => {
    if (isNull(globalFilterDataSearch.value)) {
      return true;
    }
    return filter.filterName.toLowerCase().includes(globalFilterDataSearch.value.toLowerCase())
  })
})
const getGlobalFiltersApi = () => {
  globalFiltersApi().then(resp => {
    if (isNotNull(resp.data)) {
      globalFilterTableDatas.value = resp.data.map((filter: any) => {
        filter.filterName = filter.filterName.substring(0, filter.filterName.indexOf('@'));
        return filter;
      });
    }
  })
}


// 可选路由器
const routeFilterDataSearch = ref('');
const routeFilterTableDatas = ref([{ filterName: "", order: 0 }])
const searchRouteFilterTableDatas = computed(() => {
  return routeFilterTableDatas.value.filter((filter: any) => {
    if (isNull(routeFilterDataSearch.value)) {
      return true;
    }
    return filter.filterName.toLowerCase().includes(routeFilterDataSearch.value.toLowerCase())
  })
})
const getRouteFiltersApi = () => {
  routeFiltersApi().then(resp => {
    if (isNotNull(resp.data)) {
      routeFilterTableDatas.value = resp.data.map((filter: any) => {
        filter.filterName = filter.filterName.substring(1, filter.filterName.indexOf('@'));
        return filter;
      });
    }
  })
}
/* ==================================================================
右侧详情
==================================================================*/

const routeInfoJson = ref('{"12123":"123123"}')

const saveRoute = () => {
  console.log(routeInfoJson.value);
  ElNotification({ message: '演示环境不支持修改路由', type: "warning", position: 'bottom-right', title: '修改失败' });
}

const disableRoute = () => {
  ElNotification({ message: '演示环境不支持停用路由', type: "warning", position: 'bottom-right', title: '停用失败' });
}

const formatRoute = () => {
  let obj = JSON.parse(routeInfoJson.value);
  routeInfoJson.value = formatJson(obj);
}

onMounted(() => {
  getRoutes();
  getGlobalFiltersApi();
  getRouteFiltersApi();
});


</script>

<style scoped lang="scss">
.index-gw-root {
  @include box(100%, 100%);
  @include flex(row, center, center);

  .info-root {
    border: 0;
  }

  .routes-tables {
    @include box(650px, 100%);

    .qa {
      @include box(100%, 180px);
    }

    .tables-tabs {
      @include box(100%, calc(100% - 195px));
      margin-top: 15px;

      :deep(.el-tabs__nav-scroll) {
        background-color: var(--el-color-primary-light-8);

        .is-active {
          font-weight: bold;
        }
      }

      :deep(.el-tabs__content) {
        @include box(100%, calc(100% - 38px));
        overflow: hidden;
        padding: 0 10px;

        .el-tab-pane {
          @include box(100%, 100%);
        }
      }
    }

    .table-operator {
      @include box(100%, 50px);
      @include flex(row, center, center);
    }

    .table {
      @include box(100%, calc(100% - 50px));
    }
  }


  .route-details {
    @include box(calc(100% - 650px), 100%);
    @include flex(column, flex-start, center);
    font-size: 13px;
    margin-left: 15px;
    padding: 10px;

    .route-details-operator {
      @include box(100%, 35px);
      @include flex(row, flex-start, flex-start);

      :deep(.el-tag) {
        margin-right: 10px;
        padding: 12px 10px;
      }
    }

    .route-editor-container {
      @include box(100%, calc(100% - 35px));
      background-color: #EFEFEF;


      [class="dark"] & {
        background-color: #262727;
      }

      overflow-y: scroll;

      :deep(.el-textarea) {
        height: 100%;

        .el-textarea__inner {
          height: 100%;
        }
      }
    }

  }
}
</style>